<template>
  <div class="enhancement-container">
    <h1>能力提升</h1>
    <div>
      <h2>答题窗口</h2>
      <div v-for="(question, index) in questions" :key="index">
        <p>{{ question.text }}</p>
        <input type="text" v-model="answers[index]" />
        <button @click="checkAnswer(index)">检查答案</button>
        <div v-if="hints[index]">
          <button @click="showHint(index)">提示</button>
        </div>
        <div v-if="answers[index] === question.answer">
          <p>答案正确！</p>
        </div>
        <div v-else>
          <p>答案错误！正确答案是：{{ question.answer }}</p>
        </div>
      </div>
    </div>
    <div>
      <h2>答题时间统计</h2>
      <p>总答题时间：{{ totalTime }} 秒</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        { text: "1 + 1 = ?", answer: "2" },
        { text: "2 + 2 = ?", answer: "4" },
      ],
      answers: [],
      hints: [true, true],
      startTime: null,
      totalTime: 0,
    };
  },
  mounted() {
    this.startTime = Date.now();
  },
  methods: {
    checkAnswer(index) {
      if (this.answers[index] === this.questions[index].answer) {
        this.$alert("答案正确！");
      } else {
        this.$alert("答案错误！");
      }
      this.updateTotalTime();
    },
    showHint(index) {
      this.$alert("提示：仔细思考！");
    },
    updateTotalTime() {
      const currentTime = Date.now();
      this.totalTime = Math.floor((currentTime - this.startTime) / 1000);
    },
  },
};
</script>

<style scoped>
.enhancement-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>
